<template>
  <div class="box">
    <div class="one">百信</div>
    <div class="two">风控平台</div>
    <div class="three">消金系统</div>
    <div class="four">智能中台</div>
    <div class="five">数据安全</div>
    <div class="six">数据合规</div>
  </div>
</template>

<style lang="scss" scoped>
body {
  perspective: 15rem;
}

/* 大盒子属性 */
.box {
  width: 2.5rem;
  height: 2.5rem;
  /* 过度 */
  transition: all 200s;
  /* 开启3D */
  transform-style: preserve-3d;
  position: relative;
  animation: rotate1 7s linear infinite;
}

/* 7面共同属性 */
.box div {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  top: -30%;
  left: 30%;
  line-height: 2.5rem;
  text-align: center;
  box-shadow: 0 0 10px #fff;
  box-shadow: 0 0 0.1875rem rgba(81, 203, 238, 1);
}

/* 6面各自属性和位移 */
.one {
  background-color: rgba(254, 203, 0, 0.5);
  transform: translateZ(1.25rem);
}

.two {
  background-color: rgba(77, 87, 227, 0.5);
  transform: translateZ(-1.25rem);
}

.three {
  background-color: rgba(236, 76, 212, 0.5);
  transform: rotateX(90deg) translateZ(1.25rem);
}

.four {
  background-color: rgba(85, 238, 80, 0.5);
  transform: rotateX(90deg) translateZ(-1.25rem);
}

.five {
  background-color: rgba(80, 235, 238, 0.5);
  transform: rotatey(-90deg) translateZ(-1.25rem);
}

.six {
  background-color: rgba(237, 132, 71, 0.5);
  transform: rotatey(-90deg) translateZ(1.25rem);
}

/* :hover */
.box:hover {
  animation-play-state: paused;
}

@keyframes rotate1 {
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
</style>
